<template>
  <div class="flex-box">
    <div class="flex-left">
      <div class="left-top">
        <div class="map">
          <div
            :class="['whole', activeDistrict == '太原市' ? 'active' : '']"
            @click="changeActive('太原市')"
          >
            太原市总览
          </div>
          <div class="chart-box">
            <div class="chart" ref="chartMap"></div>
          </div>
        </div>
        <div class="options">
          <div class="title">
            <img src="~@img/resources/icon-map.png" alt="" />
            <span>{{ activeDistrict }}产业载体一览</span>
          </div>
          <ul class="option-col">
            <div>
              <div class="row-head">
                <img src="@img/resources/icon-land.png" alt="" />
                <p>产业用地</p>
              </div>
              <div class="land">
                <p>工业用地</p>
                <p>
                  <span>{{ areaList.industrial }}</span
                  >公顷
                </p>
              </div>
              <div class="land">
                <p>商业用地</p>
                <p>
                  <span>{{ areaList.business }}</span
                  >公顷
                </p>
              </div>
              <div class="land">
                <p>其他用地</p>
                <p>
                  <span>{{ areaList.other }}</span
                  >公顷
                </p>
              </div>
            </div>
            <div>
              <div class="row-head">
                <img src="@img/resources/icon-factory.png" alt="" />
                <p>标准厂房</p>
              </div>
              <div class="other">
                <p>总建筑面积</p>
                <p>
                  <span>{{ areaList.factory_total_area }}</span
                  >m²
                </p>
                <p>
                  同比
                  <span
                    v-if="areaList.factory_total_area_rate == 0"
                    class="zero"
                    >{{ areaList.factory_total_area_rate }}%</span
                  >
                  <span v-if="areaList.factory_total_area_rate > 0" class="add"
                    >{{ areaList.factory_total_area_rate }}%</span
                  >
                  <img
                    v-if="areaList.factory_total_area_rate > 0"
                    src="@img/resources/icon-red.png"
                    alt=""
                  />
                  <span v-if="areaList.factory_total_area_rate < 0" class="dec"
                    >{{ areaList.factory_total_area_rate }}%</span
                  >
                  <img
                    v-if="areaList.factory_total_area_rate < 0"
                    src="@img/resources/icon-green.png"
                    alt=""
                  />
                </p>
              </div>
              <div class="other">
                <p>总闲置面积</p>
                <p>
                  <span>{{ areaList.factory_empty_area }}</span
                  >m²
                </p>
                <p>
                  同比
                  <span v-if="areaList.factory_empty_rate == 0" class="zero"
                    >{{ areaList.factory_empty_rate }}%</span
                  >
                  <span v-if="areaList.factory_empty_rate > 0" class="add"
                    >{{ areaList.factory_empty_rate }}%</span
                  >
                  <img
                    v-if="areaList.factory_empty_rate > 0"
                    src="@img/resources/icon-red.png"
                    alt=""
                  />
                  <span v-if="areaList.factory_empty_rate < 0" class="dec"
                    >{{ areaList.factory_empty_rate }}%</span
                  >
                  <img
                    v-if="areaList.factory_empty_rate < 0"
                    src="@img/resources/icon-green.png"
                    alt=""
                  />
                </p>
              </div>
              <div class="other">
                <p>闲置率</p>
                <p>
                  <span>{{ areaList.current_factory_empty_rate }}%</span>
                </p>
                <p>
                  同比
                  <span v-if="areaList.empty_rate == 0" class="zero"
                    >{{ areaList.empty_rate }}%</span
                  >
                  <span v-if="areaList.empty_rate > 0" class="add"
                    >{{ areaList.empty_rate }}%</span
                  >
                  <img
                    v-if="areaList.empty_rate > 0"
                    src="@img/resources/icon-red.png"
                    alt=""
                  />
                  <span v-if="areaList.empty_rate < 0" class="dec"
                    >{{ areaList.empty_rate }}%</span
                  >
                  <img
                    v-if="areaList.empty_rate < 0"
                    src="@img/resources/icon-green.png"
                    alt=""
                  />
                </p>
              </div>
            </div>
            <div>
              <div class="row-head">
                <img src="@img/resources/icon-building.png" alt="" />
                <p>商业楼宇</p>
              </div>
              <div class="other">
                <p>总建筑面积</p>
                <p>
                  <span>{{ areaList.build_total_area }}</span
                  >m²
                </p>
                <p>
                  同比
                  <span v-if="areaList.total_area_rate == 0" class="zero"
                    >{{ areaList.total_area_rate }}%</span
                  >
                  <span v-if="areaList.total_area_rate > 0" class="add"
                    >{{ areaList.total_area_rate }}%</span
                  >
                  <img
                    v-if="areaList.total_area_rate > 0"
                    src="@img/resources/icon-red.png"
                    alt=""
                  />
                  <span v-if="areaList.total_area_rate < 0" class="dec"
                    >{{ areaList.total_area_rate }}%</span
                  >
                  <img
                    v-if="areaList.total_area_rate < 0"
                    src="@img/resources/icon-green.png"
                    alt=""
                  />
                </p>
              </div>
              <div class="other">
                <p>总闲置面积</p>
                <p>
                  <span>{{ areaList.build_empty_area }}</span
                  >m²
                </p>
                <p>
                  同比
                  <span v-if="areaList.build_empty_rate == 0" class="zero"
                    >{{ areaList.build_empty_rate }}%</span
                  >
                  <span v-if="areaList.build_empty_rate > 0" class="add"
                    >{{ areaList.build_empty_rate }}%</span
                  >
                  <img
                    v-if="areaList.build_empty_rate > 0"
                    src="@img/resources/icon-red.png"
                    alt=""
                  />
                  <span v-if="areaList.build_empty_rate < 0" class="dec"
                    >{{ areaList.build_empty_rate }}%</span
                  >
                  <img
                    v-if="areaList.build_empty_rate < 0"
                    src="@img/resources/icon-green.png"
                    alt=""
                  />
                </p>
              </div>
              <div class="other">
                <p>闲置率</p>
                <p>
                  <span>{{ areaList.current_build_empty_rate }}%</span>
                </p>
                <p>
                  同比
                  <span v-if="areaList.build_rate == 0" class="zero"
                    >{{ areaList.build_rate }}%</span
                  >
                  <span v-if="areaList.build_rate > 0" class="add"
                    >{{ areaList.build_rate }}%</span
                  >
                  <img
                    v-if="areaList.build_rate > 0"
                    src="@img/resources/icon-red.png"
                    alt=""
                  />
                  <span v-if="areaList.build_rate < 0" class="dec"
                    >{{ areaList.build_rate }}%</span
                  >
                  <img
                    v-if="areaList.build_rate < 0"
                    src="@img/resources/icon-green.png"
                    alt=""
                  />
                </p>
              </div>
            </div>
          </ul>
          <!-- <ul class="option">
            <li class="bg1 shu shu1">
              <p>楼宇当前总面积</p>
              <p>{{ areaList.build_area }}m²</p>
            </li>
            <li class="bg1 ">
              <p>楼宇当前闲置面积</p>
              <p>{{ areaList.build_current_empty_area }}m²</p>
            </li>
            <li class="bg1 ">
              <p>楼宇去年闲置面积</p>
              <p>{{ areaList.build_last_empty_area }}m²</p>
            </li>
            <li class="bg2 shu shu2">
              <p>厂房当前总面积</p>
              <p>{{ areaList.factory_area }}m²</p>
            </li>
            <li class="bg2">
              <p>厂房当前闲置面积</p>
              <p>{{ areaList.factory_current_empty_area }}m²</p>
            </li>
            <li class="bg2">
              <p>厂房去年闲置面积</p>
              <p>{{ areaList.factory_last_empty_area }}m²</p>
            </li>
            <li class="bg3 shu shu3">
              <p>土地当前总面积</p>
              <p>{{ areaList.land_area }}公顷</p>
            </li>
            <li class="bg3">
              <p>土地当前闲置面积</p>
              <p>{{ areaList.land_current_empty_area }}公顷</p>
            </li>
            <li class="bg3">
              <p>土地去年闲置面积</p>
              <p>{{ areaList.land_last_empty_area }}公顷</p>
            </li>
            <li class="bg3 shu shu3">
              <p>计划土地存量面积</p>
              <p>{{ areaList.plan_land_stock_area }}公顷</p>
            </li>
            <li class="bg3">
              <p>计划土地储备面积</p>
              <p>{{ areaList.plan_land_store_area }}公顷</p>
            </li>
            <li class="bg3">
              <p>计划土地供应面积</p>
              <p>{{ areaList.plan_land_supply_area }}公顷</p>
            </li>
          </ul> -->
        </div>
      </div>
      <div class="left-bottom">
        <div class="title">
          <img src="~@img/resources/icon-bar.png" alt="" />
          <span
            >{{
              activeDistrict == "太原市" ? "各县（市、区）" : activeDistrict
            }}闲置载体统计图
            <em v-if="activeDistrict == '太原市'">
              （截至{{ new Date().getFullYear() }}年{{
                new Date().getMonth() + 1
              }}月）
            </em>
          </span>
        </div>
        <div class="chart-box">
          <div class="chart" ref="chartBar"></div>
        </div>
        <!-- <div class="tips">
          <img src="~@img/resources/icon-information.png" alt="" />
          <span
            >提示信息：太原市2021年环比2020年通过招商引资，闲置楼宇减少了500m2，闲置厂房减少了500m2，闲置土地减少了500公顷。</span
          >
        </div> -->
      </div>
    </div>
    <ul class="flex-right">
      <li :class="[activeHigh == 1 ? 'high high1' : '', 'bg3', 'shu', 'shu3']">
        <el-popover
          popper-class="pop-popover"
          placement="left-start"
          @show="HighPop(1)"
          @after-leave="hidePop"
          trigger="hover"
        >
          <div class="right-popover">
            <div class="pop-title">
              <img src="~@img/resources/icon-map01.png" alt="" />
              <p><span>电价</span>（单位：元/千瓦时）</p>
            </div>
            <table class=" table-1" border="1">
              <tr>
                <th>用电分类</th>
                <th>不满1千伏</th>
                <th>1-10（20）千伏</th>
                <th>35千伏及以上</th>
              </tr>
              <tr>
                <td>居民用电</td>
                <td>0.4770</td>
                <td>0.4670</td>
                <td>0.4670</td>
              </tr>
              <tr>
                <td>农业生产用电</td>
                <td>0.5002</td>
                <td>0.4852</td>
                <td>0.4702</td>
              </tr>
              <tr>
                <td>工商业用电</td>
                <td colspan="3" class="more">
                  2021年10月19日，山西省发改委通知，一般工商业和大工业用电取消销售电价目录，按照市场价格购电
                </td>
              </tr>
              <tr>
                <td>14个战略性新兴产业用电</td>
                <td colspan="3" class="more">
                  2020年9月30日，山西省出台新政，以最低0.3元/度的终端电价支持14个战略性新兴产业发展
                </td>
              </tr>
            </table>
          </div>
          <div slot="reference">
            <img src="~@img/resources/icon-map01.png" alt="" />
            <p>电价</p>
          </div>
        </el-popover>
      </li>
      <li :class="[activeHigh == 2 ? 'high high2' : '']">
        <el-popover
          popper-class="pop-popover"
          placement="left-start"
          @show="HighPop(2)"
          @after-leave="hidePop"
          trigger="hover"
        >
          <div class="right-popover">
            <div class="pop-title">
              <img src="~@img/resources/icon-map02.png" alt="" />
              <p><span>水价</span>（单位：元/立方米）</p>
            </div>
            <div class="tip">居民用水</div>
            <table class=" table-2" border="1">
              <tr>
                <th>阶梯</th>
                <th>年累计用量（立方米）</th>
                <th>水费</th>
                <th>污水处理费</th>
                <th>合计</th>
              </tr>
              <tr>
                <td>第一阶梯</td>
                <td>0-108（含）</td>
                <td>2.3</td>
                <td>0.95</td>
                <td>3.25</td>
              </tr>
              <tr>
                <td>第二阶梯</td>
                <td>108-161（含）</td>
                <td>4.6</td>
                <td>0.95</td>
                <td>5.55</td>
              </tr>
              <tr>
                <td>第三阶梯</td>
                <td>161以上</td>
                <td>6.9</td>
                <td>0.95</td>
                <td>7.85</td>
              </tr>
            </table>

            <div class="tip">非居民、特种用水</div>
            <table class=" table-2" border="1">
              <tr>
                <th>用水性质</th>
                <th>水费</th>
                <th>水资源税</th>
                <th>污水处理费</th>
                <th>合计</th>
              </tr>
              <tr>
                <td>非居民用水</td>
                <td>4</td>
                <td>0.7</td>
                <td>1.4</td>
                <td>6.1</td>
              </tr>
              <tr>
                <td>特种用水</td>
                <td>48</td>
                <td>3</td>
                <td>1.4</td>
                <td>52.4</td>
              </tr>
            </table>
          </div>
          <div slot="reference">
            <img src="~@img/resources/icon-map02.png" alt="" />
            <p>水价</p>
          </div>
        </el-popover>
      </li>
      <li :class="[activeHigh == 3 ? 'high high3' : '']">
        <el-popover
          popper-class="pop-popover"
          placement="left-start"
          @show="HighPop(3)"
          @after-leave="hidePop"
          trigger="hover"
        >
          <div class="right-popover">
            <div class="pop-title">
              <img src="~@img/resources/icon-map03.png" alt="" />
              <p><span>天然气价</span>（单位：元/立方米）</p>
            </div>
            <table class=" table-3" border="1">
              <tr>
                <th>用气分类</th>
                <th>价格</th>
              </tr>
              <tr>
                <td>居民用气</td>
                <td>2.7</td>
              </tr>
              <tr>
                <td>非居民用气 非取暖季/取暖季</td>
                <td>3.17/3.95</td>
              </tr>
            </table>
          </div>
          <div slot="reference">
            <img src="~@img/resources/icon-map03.png" alt="" />
            <p>天然气价</p>
          </div>
        </el-popover>
      </li>
      <li :class="[activeHigh == 4 ? 'high high4' : '']">
        <el-popover
          popper-class="pop-popover"
          placement="left-start"
          @show="HighPop(4)"
          @after-leave="hidePop"
          trigger="hover"
        >
          <div class="right-popover">
            <div class="pop-title">
              <img src="~@img/resources/icon-map05.png" alt="" />
              <p><span>供热价格</span>（单位：元/平方米）</p>
            </div>
            <table class=" table-5" border="1">
              <tr>
                <th>供热分类</th>
                <th>价格</th>
              </tr>
              <tr>
                <td>居民（使用面积/建筑面积）</td>
                <td>4.8/3.6</td>
              </tr>
              <tr>
                <td>非居民（建筑面积）</td>
                <td>7.5</td>
              </tr>
            </table>
          </div>
          <div slot="reference">
            <img src="~@img/resources/icon-map05.png" alt="" />
            <p>供热价格</p>
          </div>
        </el-popover>
      </li>
      <li :class="[activeHigh == 5 ? 'high high5' : '']">
        <el-popover
          popper-class="pop-popover"
          placement="left-start"
          @show="HighPop(5)"
          @after-leave="hidePop"
          trigger="hover"
        >
          <div class="right-popover">
            <div class="pop-title">
              <img src="~@img/resources/icon-map04.png" alt="" />
              <p><span>土地基准地价</span>（单位：万元/亩）</p>
            </div>
            <table class=" table-4" border="1">
              <tr>
                <th>土地类别</th>
                <th>基准地价</th>
              </tr>
              <tr>
                <td>工业类</td>
                <td>90/50.7/33.1/24.3（控制区/1-3级）</td>
              </tr>
              <tr>
                <td>商业类</td>
                <td>700/493.3/320/213.3/149.3/96.7（1-6级）</td>
              </tr>
              <tr>
                <td>住宅类</td>
                <td>448/350/245/145/121.3/81.3（1-6级）</td>
              </tr>
            </table>
          </div>
          <div slot="reference">
            <img src="~@img/resources/icon-map04.png" alt="" />
            <p>土地基准地价</p>
          </div>
        </el-popover>
      </li>
      <!-- <li :class="[activeHigh == 6 ? 'high  high6' : '']">
        <el-popover
          popper-class="pop-popover"
          placement="left-start"
          trigger="hover"
          @show="showLine(6)"
          @after-leave="hidePop()"
        >
          <div class="right-popover">
            <div class="pop-title">
              <img src="~@img/resources/icon-map06.png" alt="" />
              <p><span>贷款市场报价利率</span>（LPR）</p>
            </div>
            <div class="tip">最新发布({{ time[time.length - 1] }})</div>
            <table class=" table-6" border="1">
              <tr>
                <th>期限</th>
                <th>LPR（%）</th>
              </tr>
              <tr>
                <td>1Y</td>
                <td>{{ y1[y1.length - 1] }}</td>
              </tr>
              <tr>
                <td>5Y</td>
                <td>{{ y5[y5.length - 1] }}</td>
              </tr>
            </table>

            <div class="tip">历史走势图</div>
            <div class="chart-pop">
              <div class="chart" ref="chartLine"></div>
            </div>
          </div>
          <div slot="reference">
            <img src="~@img/resources/icon-map06.png" alt="" />
            <p>贷款市场报价利率</p>
          </div>
        </el-popover>
      </li> -->
    </ul>
    <div :class="[HighPopper == true ? 'pop' : '']"></div>
  </div>
</template>

<script>
import {
  ShowArea,
  ShowCarrierRate,
  ShowCarrierEnergy,
  GetLoansRate,
} from "@api/resources";
import ty from "@map/ty-index.json";
import dotActive from "@img/public/icon-dot-active.png";
import dotNormal from "@img/public/icon-dot-normal.png";
export default {
  data() {
    return {
      chartMap: null,
      chartBar: null,
      chartLine: null,
      disabled_district_name: "",
      activeDistrict: "太原市",
      activeHigh: 0,
      HighPopper: false,
      areaList: {},
      barData: {
        land_month: [], //
        factory_month: [], //
        build_month: [], //
        xAxisData: [], //区域名称 || 月份
        factory_year: [], // 厂房全年闲置面积
        build_year: [], //楼宇全年闲置面积
        land_year: [], //土地全年闲置面积
      },
      electric_data: {},
      gas_data: {},
      water_data: {},
      time: [],
      y1: [],
      y5: [],
    };
  },
  mounted() {
    this.disabled_district_name = localStorage.getItem("district_name") || "";
    this.activeDistrict = this.disabled_district_name || "太原市";

    this.$bus.$emit("setActive", "resources");
    this.initChartMap();
    this.initChartsBar();
    this.ShowCarrierRate();
    // this.ShowCarrierEnergy();
    this.GetLoansRate();
    this.ShowArea();
  },
  methods: {
    async ShowArea() {
      let res = await ShowArea({
        district_name:
          this.activeDistrict == "太原市" ? "" : this.activeDistrict,
      });
      let obj = {};
      res.map((item) => {
        obj = { ...obj, ...item };
      });
      this.areaList = obj;
    },
    // async ShowCarrierEnergy() {
    //   let res = await ShowCarrierEnergy();
    //   this.electric_data = res.electric_data;
    //   this.gas_data = res.gas_data;
    //   this.water_data = res.water_data;
    // },
    async GetLoansRate() {
      let res = await GetLoansRate();
      this.time = res.time.reverse();
      this.y1 = res.y1.reverse();
      this.y5 = res.y5.reverse();
      if (this.chartLine != null) {
        this.upDataChartLine();
      }
    },
    async ShowCarrierRate() {
      let res = await ShowCarrierRate({
        district_name: this.activeDistrict,
      });

      this.barData.land_month = []; //	土地第一季度闲置面积
      this.barData.factory_month = []; //	土地第三季度闲置面积
      this.barData.build_month = []; //	土地第二季度闲置面积

      this.barData.xAxisData = []; //区域名称 || 月份

      this.barData.factory_year = []; // 厂房全年闲置面积
      this.barData.build_year = []; //楼宇全年闲置面积
      this.barData.land_year = []; //土地全年闲置面积
      if (this.activeDistrict == "太原市") {
        res.map((item) => {
          this.barData.xAxisData.push(item.district_name); //区域名称
          this.barData.factory_year.push(item.factory_empty_area);
          this.barData.build_year.push(item.build_empty_area);
          this.barData.land_year.push(item.land_total_area);
        });
      } else {
        res.map((item) => {
          this.barData.xAxisData.push(item.quarter); //区域名称
          this.barData.factory_month.push(item.factory_total_area);
          this.barData.build_month.push(item.build_total_area);
          this.barData.land_month.push(item.land_total_area);
        });
      }

      this.upDataChartBar();
    },
    // 更改地区选项
    changeActive(district) {
      if (
        this.disabled_district_name != "太原市" &&
        this.disabled_district_name != ""
      ) {
        return;
      }
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "行政区",
        dataIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      });
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "开发区",
        dataIndex: [0, 1, 2, 3, 4, 5],
      });
      if (this.activeDistrict != district) {
        this.activeDistrict = district;
        this.ShowArea();
        this.ShowCarrierRate();
        this.$message({
          message: "成功切换至太原市",
          type: "success",
        });
      }
    },
    initChartMap() {
      this.chartMap = this.$echarts.init(this.$refs.chartMap);
      this.$echarts.registerMap("ty", ty);
      const initOption = {
        geo: {
          type: "map",
          map: "ty",
          zoom: 1.2,
          geoIndex: 0,
          selectedMode: "single",
          label: {
            show: true,
            color: "rgba(255,255,255,.6)",
            textBorderColor: "#2953a8",
            textBorderWidth: 1,
            formatter: function(params) {
              //标签内容
              return "{normalIcon|}" + " " + params.name;
            },
            rich: {
              normalIcon: {
                backgroundColor: {
                  image: dotNormal,
                },
              },
              activeIcon: {
                // margin: [0, 15, 0, 15],
                backgroundColor: {
                  image: dotActive,
                },
              },
            },
            fontSize: 16,
            // position: "insideBottom",
          },

          itemStyle: {
            areaColor: "#2953a8",
            borderColor: "#2168be",
            borderWidth: 2,
          },
          select: {
            itemStyle: {
              areaColor: "#2c90e5",
              color: "#2c90e5",
            },
            label: {
              show: true,
              color: "rgba(255,255,255)",
              textBorderColor: "#2953a8",
              textBorderWidth: 1,
            },
          },
          emphasis: {
            label: {
              show: true,
              color: "rgba(255,255,255)",
              textBorderColor: "#2953a8",
              textBorderWidth: 1,
              formatter: function(params) {
                //标签内容
                return "{activeIcon|}" + " " + params.name;
              },
            },
            itemStyle: {
              areaColor: "#2c90e5",
              label: {
                show: true,
                color: "#fff",
              },
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "行政区",
            type: "map",
            map: "ty",
            geoIndex: 0,
            animation: false,
            label: {
              position: "right",
              offset: [30, 40],
            },
            // layoutCenter: ["60%", "50%"],
            // layoutSize: "100%",
            data: [
              { label: "小店区", value: "小店区" },
              { label: "迎泽区", value: "迎泽区" },
              { label: "杏花岭区", value: "杏花岭区" },
              { label: "万柏林区", value: "万柏林区" },
              { label: "尖草坪区", value: "尖草坪区" },
              { label: "晋源区", value: "晋源区" },
              { label: "古交市", value: "古交市" },
              { label: "清徐县", value: "清徐县" },
              { label: "阳曲县", value: "阳曲县" },
              { label: "娄烦县", value: "娄烦县" },
            ],
          },
          {
            name: "开发区",
            type: "scatter",
            // type: "effectScatter",
            coordinateSystem: "geo",
            data: [
              // {
              //   name: "综改示范区",
              //   value: [112.607110472037, 37.7408814836355, 180],
              // },
              {
                name: "中北高新区",
                value: [112.570721979812, 37.9718734652464, 180],
              },
              {
                name: "清徐开发区",
                value: [112.365286246971, 37.6133580518845, 180],
              },
              {
                name: "阳曲示范区",
                value: [112.679409, 38.064621, 180],
              },
              {
                name: "西山示范区",
                value: [112.526291497339, 37.872764219517, 180],
              },
            ],
            symbolSize: function(val) {
              return val[2] / 20;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            // hoverAnimation: true,
            label: {
              show: true,
              // formatter: "  {b}",
              position: "right",
              color: "rgba(255,255,255,0.6)",
              textBorderColor: "#2953a8",
              textBorderWidth: 1,
              fontSize: 14,
              formatter: function(params) {
                //标签内容
                return params.name;
              },
            },
            select: {
              itemStyle: {
                color: "rgba(255,255,255)",
              },
              label: {
                show: true,
                color: "rgba(255,255,255)",
                textBorderColor: "#2953a8",
                textBorderWidth: 1,
                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
            },
            itemStyle: {
              color: "rgba(255,255,255, 0.67)",
              shadowBlur: 10,
              shadowColor: " rgba(255,255,255, 0.2)",
            },
            emphasis: {
              label: {
                show: true,
                show: true,
                color: "rgba(255,255,255)",
                textBorderColor: "#2953a8",
                textBorderWidth: 1,

                formatter: function(params) {
                  //标签内容
                  return params.name;
                },
              },
              itemStyle: {
                color: "rgba(255,255,255)",
                shadowBlur: 10,
                shadowColor: " rgba(255,255,255, 0.2)",
              },
            },
            selectedMode: "single",
            zlevel: 1,
          },
        ],
        //#region
        // series: [
        //   {
        //     name: "行政区",
        //     type: "map",
        //     map: "ty",
        //     geoIndex: 0,
        //     animation: false,
        //     layoutCenter: ["50%", "50%"],
        //     layoutSize: "100%",
        //     data: [
        //       { name: "小店区" },
        //       { name: "迎泽区" },
        //       { name: "杏花岭区" },
        //       { name: "万柏林区" },
        //       { name: "尖草坪区" },
        //       { name: "晋源区" },
        //       { name: "古交市" },
        //       { name: "清徐县" },
        //       { name: "阳曲县" },
        //       { name: "娄烦县" },
        //     ],
        //     select: {
        //       itemStyle: {
        //         areaColor: "#fff",
        //         color: "#fff",
        //         label: {
        //           show: true,
        //           color: "#fff",
        //         },
        //         borderWidth: 0,
        //       },
        //       label: {
        //         show: true,
        //         color: "#fff",
        //       },
        //     },
        //   },
        //   {
        //     name: "开发区",
        //     type: "scatter",
        //     coordinateSystem: "geo",
        //     symbolSize: function(val) {
        //       return val[2] / 20;
        //     },
        //     showEffectOn: "render",
        //     rippleEffect: {
        //       brushType: "stroke",
        //     },
        //     // hoverAnimation: true,
        //     label: {
        //       show: true,
        //       // formatter: "  {b}",
        //       position: "right",
        //       // color: "rgba(255,255,255,.5)",
        //       // padding: [6, 10],
        //       color: "#e7f4ff",
        //       // borderRadius: [6],
        //       // backgroundColor: "#e7f4ff",
        //       fontSize: 14,
        //       formatter: function(params) {
        //         //标签内容
        //         return params.name;
        //       },
        //     },
        //     select: {
        //       itemStyle: {
        //         color: "#e7f4ff",
        //       },
        //       label: {
        //         show: true,
        //         padding: [6, 10],
        //         color: "#e7f4ff",
        //         borderRadius: [6],
        //         backgroundColor: "#e7f4ff",
        //         formatter: function(params) {
        //           //标签内容
        //           return params.name;
        //         },
        //       },
        //     },
        //     itemStyle: {
        //       color: "#e7f4ff",
        //       shadowBlur: 10,
        //       shadowColor: " #e7f4ff",
        //     },
        //     emphasis: {
        //       label: {
        //         show: true,
        //         padding: [6, 10],
        //         color: "#4077c8",
        //         borderRadius: [6],
        //         backgroundColor: "#e7f4ff",
        //         formatter: function(params) {
        //           //标签内容
        //           return params.name;
        //         },
        //       },
        //       itemStyle: {
        //         color: "#e7f4ff",
        //         shadowBlur: 10,
        //         // shadowColor: " rgba(255, 255, 0, 0.2)",
        //       },
        //     },
        //     selectedMode: "single",
        //     zlevel: 1,
        //     data: [
        //       {
        //         name: "综改示范区",
        //         value: [112.607110472037, 37.7408814836355, 180],
        //       },
        //       {
        //         name: "中北高新区",
        //         value: [112.570721979812, 37.9718734652464, 180],
        //       },
        //       {
        //         name: "清徐开发区",
        //         value: [112.365286246971, 37.6133580518845, 180],
        //       },
        //       {
        //         name: "阳曲示范区",
        //         value: [112.679409, 38.064621, 180],
        //       },
        //       {
        //         name: "西山示范区",
        //         value: [112.526291497339, 37.872764219517, 180],
        //       },
        //     ],
        //   },
        // ],
        //#endregion
      };
      this.chartMap.setOption(initOption);
      if (
        this.disabled_district_name != "太原市" &&
        this.disabled_district_name != ""
      ) {
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });

        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "unselect",
          seriesName: "行政区",
        });
        this.chartMap.dispatchAction({
          type: "highlight",
          name: this.disabled_district_name,
        });
        this.chartMap.dispatchAction({
          type: "select",
          name: this.disabled_district_name,
        });
      }
      // 地图点击事件
      this.chartMap.on("click", (item) => {
        console.log(1);
        console.log(this.disabled_district_name);
        if (
          this.disabled_district_name != "太原市" &&
          this.disabled_district_name != ""
        ) {
          console.log(1);
          this.chartMap.dispatchAction({
            type: "downplay",
            seriesName: "开发区",
          });
          this.chartMap.dispatchAction({
            type: "downplay",
            seriesName: "行政区",
          });

          this.chartMap.dispatchAction({
            type: "unselect",
            seriesName: "开发区",
          });
          this.chartMap.dispatchAction({
            type: "unselect",
            seriesName: "行政区",
          });
          this.chartMap.dispatchAction({
            type: "highlight",
            name: this.disabled_district_name,
          });
          this.chartMap.dispatchAction({
            type: "select",
            name: this.disabled_district_name,
          });
          return false;
        }
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });
        // this.chartMap.dispatchAction({
        //   type: "downplay",
        //   seriesName: "行政区",
        //   dataIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        // });
        // this.chartMap.dispatchAction({
        //   type: "downplay",
        //   seriesName: "开发区",
        //   dataIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        // });
        if (this.activeDistrict == item.name) {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: item.dataIndex,
          });
          return;
        }
        this.activeDistrict = item.name;
        if (item.componentSubType == "scatter") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
        }
        if (item.componentSubType == "map") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "行政区",
            dataIndex: item.dataIndex,
          });
        }
        this.activeDistrict = item.name;
        this.ShowArea();
        this.ShowCarrierRate();

        this.$message({
          message: "成功切换至" + item.name,
          type: "success",
        });
      });
      // this.chartSelect(this.chartMap);
    },
    initChartsBar() {
      this.chartBar = this.$echarts.init(this.$refs.chartBar);
      let legend = [];
      let fontSize = 14;
      if (document.body.scrollWidth < 1536) {
        legend = [
          {
            x: "40%",
            y: "10%",
            textStyle: {
              fontSize: 11,
              color: "#333333",
            },
            data: ["2022年产业用地数量(公顷)"],
          },
          {
            x: "58%",
            y: "10%",
            align: "left",
            center: "center",
            textStyle: {
              color: "#333333",
              fontSize: 11,
            },
            data: ["2022年闲置标准厂房数量(m²)"],
          },
          {
            x: "78%",
            y: "10%",
            align: "left",
            center: "center",
            textStyle: {
              color: "#333333",
              fontSize: 11,
            },
            data: ["2022年闲置商业楼宇数量(m²)"],
          },
        ];
        fontSize = 12;
      } else {
        legend = [
          {
            x: "55%",
            y: "10%",
            textStyle: {
              fontSize: 12,
              color: "#333333",
            },
            data: ["2022年产业用地数量(公顷)"],
          },
          {
            x: "70%",
            y: "10%",
            align: "left",
            center: "center",
            textStyle: {
              color: "#333333",
              fontSize: 12,
            },
            data: ["2022年闲置标准厂房数量(m²)"],
          },
          {
            x: "85%",
            y: "10%",
            align: "left",
            center: "center",
            textStyle: {
              color: "#333333",
              fontSize: 12,
            },
            data: ["2022年闲置商业楼宇数量(m²)"],
          },
        ];
      }
      let initOption = {
        backgroundColor: "rgba(0,0,0,0)",
        color: ["#78a3ff", "#ff7272", "#17d0b1"],
        // legend: [
        //   {
        //     x: "55%",
        //     y: "0%",
        //     itemGap: 10,
        //     textStyle: {
        //       fontSize: 12,
        //       color: "#333333",
        //     },
        //     data: ["2021年闲置商业楼宇数量"],
        //   },
        //   {
        //     x: "55%",
        //     y: "10%",
        //     textStyle: {
        //       fontSize: 12,
        //       color: "#333333",
        //     },
        //     data: ["2020年闲置商业楼宇数量"],
        //   },
        //   {
        //     x: "55%",
        //     y: "20%",
        //     align: "left",
        //     center: "center",
        //     textStyle: {
        //       color: "#333333",
        //       fontSize: 12,
        //     },
        //     data: ["闲置商业楼宇环比减少数量"],
        //   },
        //   {
        //     x: "70%",
        //     y: "0%",
        //     align: "left",
        //     center: "center",
        //     textStyle: {
        //       color: "#333333",
        //       fontSize: 12,
        //     },
        //     data: ["2021年闲置标准厂房数量"],
        //   },
        //   {
        //     x: "70%",
        //     y: "10%",
        //     align: "left",
        //     center: "center",
        //     textStyle: {
        //       color: "#333333",
        //       fontSize: 12,
        //     },
        //     data: ["2020年闲置标准厂房数量"],
        //   },

        //   {
        //     x: "70%",
        //     y: "20%",
        //     align: "left",
        //     center: "center",
        //     textStyle: {
        //       color: "#333333",
        //       fontSize: 12,
        //     },
        //     data: ["闲置标准厂房环比减少数量"],
        //   },
        //   {
        //     x: "85%",
        //     y: "0%",
        //     align: "left",
        //     center: "center",
        //     textStyle: {
        //       color: "#333333",
        //       fontSize: 12,
        //     },
        //     data: ["2021年闲置土地数量"],
        //   },
        //   {
        //     x: "85%",
        //     y: "10%",
        //     align: "left",
        //     center: "center",
        //     textStyle: {
        //       color: "#333333",
        //       fontSize: 12,
        //     },
        //     data: ["2020年闲置土地数量"],
        //   },
        //   {
        //     x: "85%",
        //     y: "20%",
        //     align: "left",
        //     center: "center",
        //     textStyle: {
        //       color: "#333333",
        //       fontSize: 12,
        //     },
        //     data: ["闲置土地环比减少数量"],
        //   },
        // ],
        legend: legend,
        // dataZoom: [
        //   {
        //     start: 0,
        //     end: 50,
        //     bottom: "0%",
        //     textStyle: {
        //       color: "rgba(255, 255, 255, 1)",
        //     },
        //   },
        //   {
        //     type: "inside",
        //   },
        // ],
        tooltip: {
          show: true,
        },
        grid: {
          top: "35%",
          left: "4%",
          bottom: "25%",
          right: "4%",
        },
        title: {
          show: false,
        },
        // legend: {
        //   show: true,
        // },
        xAxis: {
          type: "category",
          minInterval: 3,
          // interval: 500, //每次增加几个
          axisLine: {
            lineStyle: {
              color: "#f1f1f1",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          // splitArea: {
          //   show: true,
          //   areaStyle: {
          //     color: ["rgba(3, 78, 144,0.1)", "rgba(3, 78, 144,0.1)"],
          //   },
          // },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#f1f1f1",
              width: 1,
            },
          },
          axisLabel: {
            show: true,
            color: "#666",
            align: "center",
            fontSize: fontSize,
            interval: 0,
            formatter: function(value) {
              // if (value.length < 5) {
              var str = " " + value;
              // } else {
              //   var str =
              //     value.substr(0, 5) +
              //     "\n" +
              //     value.substr(5, 4) +
              //     "\n" +
              //     value.substr(8);
              // }

              return str;
            },
          },
          data: [],
        },
        yAxis: [
          {
            type: "value",
            name: "m²",
            color: "#f1f1f1",
            nameTextStyle: {
              color: "#6e7079",
            },
            splitNumber: 3,
            minInterval:2,
            // interval: 40, //每次增加几个
            axisLine: {
              show: true,
              lineStyle: {
                color: "#dedede",
                width: 1,
              },
            },
            axisLabel: {
              show: true,
              color: "#6e7079",
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: "#f1f1f1",
                width: 1,
              },
            },
            alignTicks: true,
          },
          {
            type: "value",
            splitNumber: 3,
            minInterval: 2,
            name: "公顷",
            color: "#f1f1f1",
            nameTextStyle: {
              color: "#6e7079",
            },
            alignTicks: true,
            interval: 40, //每次增加几个
            axisLine: {
              show: true,
              lineStyle: {
                color: "#dedede",
                width: 1,
              },
            },
            axisLabel: {
              show: true,
              color: "#6e7079",
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: "#f1f1f1",
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 10, //柱图宽度
            name: new Date().getFullYear() + "年产业用地数量(公顷)",
            itemStyle: {
              //柱形图圆角，初始化效果
              borderRadius: [10, 10, 0, 0],
              tooltip: {
                formatter: "{a1}:",
              },
            },
            yAxisIndex: 1,
            color: ["#78a3ff "],
          },
          {
            type: "bar",
            barWidth: 10, //柱图宽度
            name: new Date().getFullYear() + "年闲置标准厂房数量(m²)",
            itemStyle: {
              //柱形图圆角，初始化效果
              borderRadius: [10, 10, 0, 0],
              tooltip: {
                formatter: "{a1}:",
              },
            },
            color: ["#ff7272"],
          },
          {
            type: "bar",
            barWidth: 10, //柱图宽度
            name: new Date().getFullYear() + "年闲置商业楼宇数量(m²)",
            itemStyle: {
              //柱形图圆角，初始化效果
              borderRadius: [10, 10, 0, 0],
              tooltip: {
                formatter: "{a1}:",
              },
            },
            color: ["#17d0b1"],
          },
        ],
      };
      this.chartBar.setOption(initOption);
    },
    upDataChartBar() {
      if (this.activeDistrict == "太原市") {
        let upDataOption = {
          xAxis: {
            data: this.barData.xAxisData,
          },
          series: [
            {
              data: this.barData.land_year,
            },
            {
              data: this.barData.factory_year,
            },
            {
              data: this.barData.build_year,
            },
          ],
        };
        this.chartBar.setOption(upDataOption);
      } else {
        let upDataOption = {
          xAxis: {
            // data: this.barData.xAxisData,
            data: ["第一季度", "第二季度", "第三季度", "第四季度"],
          },
          series: [
            {
              data: this.barData.land_month,
            },
            {
              data: this.barData.factory_month,
            },
            {
              data: this.barData.build_month,
            },
          ],
        };
        this.chartBar.setOption(upDataOption);
      }
    },
    // 悬停到利率时加载图表
    showLine(index) {
      this.activeHigh = index;
      this.HighPopper = true;
      if (this.chartLine == null) {
        this.$nextTick(() => {
          this.initChartsLine();
        });
      } else {
        this.upDataChartLine();
      }
    },

    HighPop(index) {
      this.activeHigh = index;
      this.HighPopper = true;
    },
    hidePop() {
      this.activeHigh = 0;
      this.HighPopper = false;
    },
    // 初始化利率图表
    initChartsLine() {
      this.chartLine = this.$echarts.init(this.$refs.chartLine);
      let initOption = {
        color: ["#4bc1ca", "#2f4554"],
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255, 255, 255,0.8)",
          extraCssText: "box-shadow: 0 0 8px rgba(0,0,0, 0.6);",
          padding: 5,
          textStyle: {
            color: "#555",
          },
          formatter: function(params) {
            let str = params[0].name + "";
            params.map((item) => {
              str +=
                "<br />" +
                item.marker +
                " " +
                item.seriesName +
                " : " +
                item.value +
                "%";
            });
            return str;
          },
        },
        legend: {
          data: ["1Y", "5Y"],
        },
        grid: {
          top: "18%",
          left: "3%",
          right: "4%",
          bottom: "18%",
          containLabel: true,
        },
        dataZoom: [
          {},
          {
            type: "inside",
          },
        ],
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#666",
              width: 1.5,
            },
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
            lineStyle: {
              color: "#666",
              width: 1.5,
            },
          },
        },
        yAxis: {
          name: "利率（%）",
          nameTextStyle: {
            color: "#666",
          },
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#666",
              width: 1.5,
            },
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
            lineStyle: {
              color: "#666",
              width: 1.5,
            },
          },
        },
        series: [
          {
            name: "1Y",
            type: "line",
          },
          {
            name: "5Y",
            type: "line",
          },
        ],
      };
      this.chartLine.setOption(initOption);
      this.upDataChartLine();
    },
    // 更新图表数据
    upDataChartLine() {
      return
      let upDataOption = {
        xAxis: {
          data: this.time,
        },
        series: [
          {
            data: this.y1,
          },
          {
            data: this.y5,
          },
        ],
      };
      this.chartLine.setOption(upDataOption);
    },
  },
};
</script>

<style lang="less" scoped>
em {
  color: #333 !important;
}
p,
span {
  font-family: Microsoft YaHei;
}
img,
span {
  vertical-align: middle;
}

.flex-box {
  padding: 30px 30px 30px 20px;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.flex-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  .left-top {
    flex: 1;
    display: flex;
    justify-content: space-between;
    .map {
      position: relative;
      flex: 0 0 48%;
      padding: 30px;
      height: 100%;
      background: #ffffff;
      box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
      border-radius: 10px;
    }
    .options {
      flex: 0 0 50%;
      padding: 15px 30px;
      background: #ffffff;
      box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
      border-radius: 10px;
      text-align: left;
      .title {
        img {
          vertical-align: middle;
        }
        span {
          margin-left: 20px;
          vertical-align: middle;
          font-size: 36px;
          font-weight: bold;
          color: #333333;
        }
      }
    }
  }
  .left-bottom {
    padding: 15px 30px 10px;
    margin-top: 20px;
    flex: 0 0 33%;
    background: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
    border-radius: 10px;
  }
}
.flex-right {
  flex: 0 0 110px;
  margin-left: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  li {
    width: 110px;
    height: 110px;
    box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
    border-radius: 10px;
    img {
      margin-top: 10px;
    }
    p {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      cursor: default;
    }
    &:nth-of-type(1) {
      background: rgba(254, 139, 43, 0.05);
    }
    &:nth-of-type(2) {
      background: rgba(16, 126, 224, 0.05);
    }
    &:nth-of-type(3) {
      background: rgba(255, 87, 122, 0.05);
    }
    &:nth-of-type(4) {
      background: rgba(255, 105, 95, 0.05);
    }
    &:nth-of-type(5) {
      background: rgba(55, 186, 66, 0.05);
    }
    &:nth-of-type(6) {
      background: rgba(11, 192, 175, 0.05);
    }
  }
}
.option {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  li {
    position: relative;
    flex: 0 0 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 0 15px 36px;
    margin-bottom: 20px;
    height: 80px;
    box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
    border-radius: 6px;
    &.bg1 {
      background: rgba(120, 163, 255, 0.05);
    }
    &.bg2 {
      background: rgba(255, 114, 114, 0.05);
    }
    &.bg3 {
      background: rgba(23, 208, 177, 0.05);
    }
    &.shu::after {
      content: "";
      border-radius: 6px 0px 0px 6px;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 6px;
    }
    &.shu1::after {
      background: #78a3ff;
    }
    &.shu2::after {
      background: #ff7272;
    }
    &.shu3::after {
      background: #17d0b1;
    }
    p:first-of-type {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
    p:last-of-type {
      font-size: 22px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #666666;
    }
  }
}
.option-col > div {
  margin-top: 20px;
  height: 108px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 6px;
  display: flex;
  & > div {
    flex: 0 0 28%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: default;
    p:nth-of-type(1) {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #666666;
    }
    p:nth-of-type(2) {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      span {
        margin-right: 4px;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #78a3ff;
        vertical-align: unset;
      }
    }
    p:nth-of-type(3) {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #cccccc;
      img {
        vertical-align: unset;
      }
      span {
        margin: 0 4px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        vertical-align: unset;
      }
      span.dec {
        color: #35bf69;
      }
      span.add {
        color: #f15847;
      }
      span.zero {
        color: #999;
      }
    }
  }
  & > div:first-of-type {
    flex: 0 0 24%;
  }
  & > div:last-of-type {
    flex: 0 0 20%;
  }
  & > div.land {
    padding: 22px 0;
  }
  & > div.other {
    padding: 10px 0;
  }
  & > div.row-head {
    padding: 20px 0;
    text-align: center;
    img {
      margin: 0 auto;
      width: 30px;
    }
    p {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
    }
  }
}
.whole {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 120px;
  line-height: 32px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #5889dc;
  border-radius: 5px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #5889dc;
  cursor: pointer;
  z-index: 996;
}
.whole.active {
  background: #5889dc;
  color: #fff;
}
.left-bottom {
  position: relative;
  text-align: left;
  .title {
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
  .tips {
    position: absolute;
    bottom: 10px;
    left: 30px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #5889dc;
  }
  img {
    margin-right: 10px;
  }
}
.chart-pop {
  width: 100%;
  height: 237px;
}
.chart-box,
.chart {
  width: 100%;
  height: 100%;
}

.right-popover .pop-title {
  height: 40px;
  line-height: 40px;
  img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }
  p {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    span {
      display: inline-block;
      font-size: 20px;
      font-weight: bold;
      vertical-align: middle;
      margin: 0 0 0 5px;
    }
  }
}
.right-popover .tip {
  margin-top: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.right-popover table {
  margin: 10px 12px 10px 12px;
  border-color: #fff;
  width: 480px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-align: center;
  th {
    padding: 10px 0;
    font-weight: bold;
    color: #ffffff;
  }
  tr,
  td {
    min-height: 30px;
  }
  .more {
    padding: 10px;
    text-align: left;
  }
  td {
    padding: 10px 0;
  }
}

.table-1 {
  color: #4e2a0d;
  th {
    background: #fe8727;
  }

  tr:nth-of-type(1n) {
    background: rgba(254, 135, 39, 0.05);
  }
  tr:nth-of-type(2n) {
    background: rgba(254, 135, 39, 0.2);
  }
}
.table-2 {
  color: #0a2342;

  th {
    background: #107de0;
  }

  tr:nth-of-type(1n) {
    background: rgba(16, 125, 224, 0.05);
  }
  tr:nth-of-type(2n) {
    background: rgba(16, 125, 224, 0.2);
  }
}
.table-3 {
  color: #4f0c19;
  th {
    background: #ff5274;
  }
  tr:nth-of-type(1n) {
    background: rgba(255, 82, 116, 0.05);
  }
  tr:nth-of-type(2n) {
    background: rgba(255, 82, 116, 0.2);
  }
}
.table-4 {
  color: #0a4411;
  th {
    background: #27ad37;
  }

  tr:nth-of-type(1n) {
    background: rgba(39, 173, 55, 0.05);
  }
  tr:nth-of-type(2n) {
    background: rgba(39, 173, 55, 0.2);
  }
}
.table-5 {
  color: #4e0f0c;
  th {
    background: #ff655e;
  }
  tr:nth-of-type(1n) {
    background: rgba(255, 101, 94, 0.05);
  }
  tr:nth-of-type(2n) {
    background: rgba(255, 101, 94, 0.2);
  }
}
.table-6 {
  color: #088175;
  th {
    background: #04c6b3;
  }
  tr:nth-of-type(1n) {
    background: rgba(4, 198, 179, 0.05);
  }
  tr:nth-of-type(2n) {
    background: rgba(4, 198, 179, 0.2);
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .option-col > div > div p:nth-of-type(2) span {
    font-size: 16px !important;
  }
  .flex-left .left-top .options .title span {
    font-size: 24px;
  }
  .flex-left .left-top {
    flex: 0 0 64%;
  }
  .option-col > div {
    height: 90px;
  }
  .flex-right li {
    height: 90px;
    img {
      width: 50px;
      margin: 10px auto 0;
    }
  }
  .left-bottom .title {
    font-size: 14px;
  }
  .option-col > div {
    margin-top: 14px;
  }
  .options .title {
    img {
      height: 30px;
    }
  }
  .option-col {
    height: calc(100% - 50px);
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    li {
      flex: 0 0 32%;
    }
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .flex-right li {
    height: 110px;
  }
  .flex-left .left-top {
    flex: 0 0 540px;
  }
  .option-col > div {
    height: 120px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .flex-left {
    flex-direction: column;
    overflow-y: auto;
  }
  .left-top {
    flex-direction: column;
  }
  .left-bottom .title {
    font-size: 12px;
  }
  .flex-right li img {
    margin-top: 4px;
  }
  .flex-right li {
    height: 90px;
  }
  .flex-left .left-top {
    flex: 0 0 980px;
  }
}
</style>
<style>
.pop-popover {
  width: 530px !important;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px #bdbdbd;
  border-radius: 10px;
}
.high {
  z-index: 9999;
}
.high1 {
  background: #fff9f4 !important;
}
.high2 {
  background: #f3f8fd !important;
}
.high3 {
  background: #fff6f8 !important;
}
.high4 {
  background: #fff7f7 !important;
}
.high5 {
  background: #f4fbf5 !important;
}
.high6 {
  background: #f3fcfb !important;
}

.pop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 998;
  transition: 0.3s;
}
</style>
